<template>
    <div class="app-container">
        <div class="cart">
            <el-button icon="el-icon-shopping-cart-1" type="primary" size="medium" class="btn-success" circle @click="cart()"></el-button>
        </div>
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">商城产品</p>
        </div>
        <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
            <el-form-item label="产品名称" prop="specificationsName">
                <el-input
                    v-model="queryParams.specificationsName"
                    placeholder="请输入产品名称搜索"
                    clearable
                    size="small"
                    style="width:230px;"
                    @clear="handleClear"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-card>
            <div slot="header">
                <span>{{ name }}</span>
            </div>
            <el-row>
                <el-col :span="4" v-for="(i, index) in list" :key="index">
                    <div class="item">
                        <el-carousel trigger="click" :autoplay="false" height="255px" v-if="i.shareFileList.length > 0">
                            <el-carousel-item v-for="item in i.shareFileList" :key="item.id">
                                <img :src="item.fileUrl" class="image" />
                            </el-carousel-item>
                        </el-carousel>
                        <div class="image itemImg" v-else>暂无图片</div>
                        <p @click="detail(i)">产品名称：{{ i.specificationName }}</p>
                        <p @click="detail(i)">产品价格：{{ i.sellingPrice !== null && i.sellingPrice !== '' ? i.sellingPrice : i.productPrice !== null && i.productPrice !== '' ? i.productPrice : '暂无价格' }}</p>
                        <p @click="detail(i)">产品描述：{{ i.description !== '' && i.description !== null ? i.description : '暂无' }}</p>
                        <el-input-number v-model="i.num" :min="1"></el-input-number>
                        <div class="btn">
                            <el-button size="small" type="primary" class="btn-success" @click="buy(i, 'add')">加入购物车</el-button>
                            <el-button size="small" type="primary" class="btn-success" @click="buy(i, 'buy')">立即申请</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { storeAllList, cartBuy, cartAdd } from "@/api/system/basedata/productCollection/productCollection"
import { detailConfig } from "@/api/system/setting/config/config"
export default {
    name: "list",
    data() {
        return {
            list: [],
            form: {
                orderType: '1',
                status: "1", 
                approvalStatus: "0", 
                purchaseOrderProductList: []
            },
            name: '',
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                collectionId: '',
                specificationsName: undefined
            },
            config: '', // 1 销售订单 0 采购订单
        }
    },
    created() {
        // this.id = this.$route.query.id
        this.queryParams.collectionId = this.$route.query.id
        this.name = this.$route.query.name
        this.getList()
        this.getConfig()
    },
    methods: {
        // 获取参数配置详情
        getConfig(){
            detailConfig('generatePurchaseOrder', 'shoppingMall').then(res => {
                if(res.data.length > 0){
                    this.config = res.data[0].ifAllow
                }
            })
        },
        // 获取列表
        getList() {
            storeAllList(this.addDateRange(this.queryParams)).then(res => {
                this.list = res.rows
                this.total = res.total
            })
        },
        // 立即购买
        buy(y, val){
            // console.log(y)
            let obj = {
                productBasicId: y.productId,
                productBasicCode: y.productCode,
                productBasicName: y.productName,
                productId: y.specificationsId,
                productCode: y.specificationCode,
                productName: y.specificationName,
                specification: y.value1 == null && y.value1 == '' ? '' : y.value1  + y.value2,
                num: y.num,
                unit: y.unit,
                untaxedAmount: y.sellingPrice !== null && y.sellingPrice !== '' ? y.sellingPrice : y.productPrice !== null && y.productPrice !== '' ? y.productPrice : 0,
                amount: Number(y.num) * Number(y.sellingPrice !== null && y.sellingPrice !== '' ? y.sellingPrice : y.productPrice !== null && y.productPrice !== '' ? y.productPrice : 0)
            }
            // console.log(obj)
            this.form.purchaseOrderProductList = []
            this.form.purchaseOrderProductList.push(obj)
            if(val == 'buy'){
                cartBuy(this.form).then(res => {
                    this.$modal.msgSuccess("操作成功!")
                    if(this.config == '0'){
                        this.$router.push({path:"/purchase/purchaseOrder/list"})
                    }else{
                        this.$router.push({path:"/sales/salesOrder/list"})
                    }
                })
            }else{
                cartAdd(obj).then(res => {
                    this.$modal.msgSuccess("添加成功!")
                })
            }
        },
        // 购物车
        cart(){
            this.$router.push({path:"/store/cart"})
        },
        // 产品详情
        detail(y){
            this.$router.push({path:"/store/detail", query:{ data: y }})
        },
        detailAll(y){
            if(y.description){
                window.open(y.description, '_blank')
            }
        },
        // 搜索按钮
        handleQuery() {
            this.getList()
        },
        // 清除
        handleClear(){
            this.handleQuery()
        },
    }
}
</script>

<style scoped>
.cart{
    position: absolute;
    right: 30px;
    top: 10px;
    z-index: 999;
}
::v-deep .pagination-container{
    padding: 20px 0 50px!important;
}
::v-deep .el-card{
    margin-top: 10px;
}
::v-deep .el-input-number--medium{
    width: auto;
    margin-top: 10px;
}
::v-deep .el-card .item{
    padding: 0 5px 20px;
}
::v-deep .el-card .more{
    float: right;
    color: #28C6C6;
}
::v-deep .el-card .item .image{
    display: block;
    width: 100%;
    height: 255px;
    overflow: hidden;
    min-height: 255px;
}
::v-deep .el-card .item p{
    padding: 5px 0 0;
    font-size: 14px;
    height: 25px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
::v-deep .el-card .item .itemImg{
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9e9e9;
}
::v-deep .el-card .item .btn{
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
}
</style>